<template>
  <div class="investment">
      <!-- 头部 -->
      <my-head title="我要投资" :go="null" :ri="false"></my-head>
      <div class="header">
        <div class="header-top">
          <span v-for="(item,index) in toptypes"
                :key="index"
                @click="toggle(item.id)"
                :class="{active:item.id===currentId}"
              >
                {{item.type}}
          </span>
        </div>
        <div class="header-bottom">
          <span v-for="(item,index) in toptype"
                :key="index"
                @click="toggle(item.id)"
                :class="{active:item.id===currentId}"
              >
                {{item.type}}
          </span>
        </div>
        <div class="lei" v-if="item.id==currentId"  v-for="(item,index) in toptypes" :key="index">
          <p v-for="(value,index) in item.content" :key="index">{{value}}</p>
        </div>
      </div>
      <!-- 主体 -->
      <div class="main">
        <div class="content" v-for="(item,index) in list" :key="index" @click="tiao(item)">
          <div class="top">
            <div class="left">{{item.date}}</div>
            <div class="right" v-if="item.biao == '红包标'">{{item.biao}}</div>
            <div class="right blue" v-if="item.biao == '新手标'">{{item.biao}}</div>
            <div class="right orange" v-if="item.biao == '活动标'">{{item.biao}}</div>
          </div>
          <div class="center">
            <div class="left">{{item.years}}</div>
            <div class="center">{{item.yue}}</div>
            <div class="right">{{item.money}}</div>
          </div>
          <div class="bottom">
            <div class="left">{{item.lixi}}</div>
            <div class="center">{{item.yuefen}}</div>
            <div class="right" v-if="item.touzi == '已经售罄'">{{item.touzi}}</div>
            <div class="right orange" v-if="item.touzi == '我要投资'">{{item.touzi}}</div>
            <div class="right pink" v-if="item.touzi == '还款中…'">{{item.touzi}}</div>
          </div>
        </div>
      </div>
  </div>
</template>

<script>
import Head from '@/components/Head'
export default {
  data(){
    return{
      list:[],
      currentId:1001,
      toptypes:[
        {id:1001,type:'全部',content:[]},
        {id:1002,type:'福利标',content:['红包标','活动标']},
        {id:1003,type:'散标',content:['小微企业','分期宝','供应链','资产标区','债权装让','荷包理财']}
      ],
      toptype:[
        {id:1004,type:'即投计息',content:[]},
        {id:1005,type:'满标计息',content:[]}
      ]
    }
  },
  created(){
    this.$http.get("static/json/investment.json").then(res=>{
      // console.log(res.data.data)
      this.list = res.data.data
    })
  },
  methods:{
    tiao(item){
      this.$router.push({path:"/details"})
      sessionStorage.setItem("itemid",item.id)
    },
    toggle(num){
      console.log(num)
      num && (this.currentId=num)
    }
  },
  components:{
    myHead:Head
  }
}
</script>

<style scoped>
  .investment{
    flex: 1;
    display: flex;
    flex-direction: column;
  }
  /* 选中 */
  .active{
    color: orange;
  }
  /* 头部 */
  .header{
    background: #fff;
    font-size: .13rem;
  }
  .header span{
    padding: 0.08rem 0;
  }
  .header-top{
    display: flex;
    flex-direction: row;
  }
  .header-top span{
    flex: 1;
    text-align: center;
    border: 1px solid #f4f4f4;
    border-right: none;
    border-top: 1px solid #ccc;
  }
  .lei{
    width: 100%;
    position: absolute;
    left: 0;
    top: 1.08rem;
    background: #fff;
  }
  .lei p{
    width: 100%;
    flex: 1;
    border: 1px solid #f4f4f4;
    text-align: center;
    padding: 0.08rem 0;
    border-top: none;
  }
  .header-bottom{
    display: flex;
    flex-direction: row;
  }
  .header-bottom span{
    flex: 1;
    text-align: center;
    border: 1px solid #f4f4f4;
    border-top: none;
    border-right: none;
  }
  /* 内容 */
  .main{
    flex: 1;
    background: rgb(216, 216, 216);
    overflow-y: auto;
    font-size: .1rem;
  }
  .content{
    border-bottom: 1px solid #f4f4f4;
    background: #fff;
    margin-bottom: .1rem;
    display: flex;
    flex-direction: column;
    padding: 0 .1rem;
  }
  .content .top{
    display: flex;
    flex-direction: row;
    padding: .1rem 0;

  }
  .content .top .left{
    flex: 1
  }
  .content .top .right{
    border: 1px solid #f00;
    border-radius: 10px;
    color: #f00;
    padding: 0.04rem;
  }
  .content .top .right.blue{
    border-color: blue;
    color: blue;
  }
  .content .top .right.orange{
    border-color: orange;
    color: orange;
  }
  .content>.center{
    display: flex;
    flex-direction: row;
    color: #ccc;
    
    padding: 0.05rem 0;
  }
  .content .center .left{
    flex: 1
  }
  .content .center .center{
    flex: 1;
    text-align: center;
  }
  .content .center .right{
   flex: 1;
  }
  .content .bottom{
    display: flex;
    flex-direction: row;
    padding-top: .1rem;
    padding-bottom: 0.02rem;
  }
  .content .bottom .left{
    color: #f00;
    flex: 1;
    font-size: 20px;
  }
  .content .bottom .center{
    flex: 1;
    color: #000;
  }
  .content .bottom .right{
    border: 1px solid rgba(0, 0, 0, 0);
    border-radius: 10px;
    background: rgba(0, 0, 0, .3);
    color: #fff;
    padding: 0.04rem;
  }
  .content .bottom .right.orange{
    background: orange;
    border-color:orange; 
  }
  .content .bottom .right.pink{
    background: pink;
    border-color:pink; 
  }
</style>